<template>
  <div class="all">
    <div class="page-shopping-cart" id="shopping-cart">
      <h1>
        <a class="rehome" href="/homePage"><Icon type="ios-home"></Icon></a>
      </h1>
      <h4 class="cart-title">购物清单<Icon type="ios-cart"></Icon></h4>

      <div class="cart-product-title clearfix">
        <div class="td-check fl">
          <input
            type="checkbox"
            class="check-span fl check-all"
            v-model="checked"
            @click="checkAll"
          />全选
        </div>
        <div class="td-product fl">图片</div>
        <div class="td-name fl">商品</div>
        <div class="td-price fl">单价(元)</div>
        <div class="td-num fl">数量</div>
        <div class="td-total fl">金额(元)</div>
        <div class="td-do fl">操作</div>
      </div>
      <div class="cart-product clearfix">
        <table>
          <tbody>
            <tr v-for="(item, index) in testdata" :key="item.bookId">
              <td class="td-check">
                <input
                  type="checkbox"
                  class="check-span"
                  v-model="checkModel"
                  :value="item.bookId"
                  @click="changeSelected(item.bookId)"
                />
              </td>
              <td class="td-product">
                <img :src="item.coverImg" width="98" height="98" />
              </td>
              <td class="td-name">
                <a
                  class="bookName"
                  @click="getGoodsInfo(item.bookId)"
                  >{{ item.bookTitle}}</a
                >
              </td>

              <td class="td-price">
                <p class="red-text">
                  ￥<span class="price-text">{{
                    item.price
                  }}</span>
                </p>
              </td>
              <td class="td-num">
                <div class="product-num">
                  <a
                    href="javascript:;"
                    class="num-reduce num-do fl"
                    @click="sub(item.bookId)"
                    ><span>-</span>
                  </a>
                  <input type="text" class="num-input" v-model="item.num" />
                  <a
                    href="javascript:;"
                    class="num-add num-do fr"
                    @click="add(item.bookId)"
                    ><span>+</span>
                  </a>
                </div>
              </td>
              <td class="td-total">
                <p class="red-text">
                  ￥<span class="total-text">{{
                    item.num * item.price
                  }}</span
                  >
                </p>
              </td>
              <td class="td-do">
                <a
                  href="javascript:;"
                  class="product-delect"
                  @click="deleteOnePro(index,row)"
                  >删除</a
                >
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="cart-product-info">
        <a class="delect-product" href="javascript:;" @click="deletePro"
          ><span></span>清空购物车</a
        >
        <a class="keep-shopping" href="javascript:;" @click="reback"
          ><span></span>继续购物</a
        >
        <a class="btn-buy fr" href="javascript:;" @click="pay">去结算</a>
        <p class="fr product-total">
          ￥<span>{{ sumPrice }}</span>
        </p>
        <p class="fr check-num"><span>{{ sumNum }}</span>件商品总计（不含运费）：</p>
      </div>
    </div>

     <el-dialog title="购买" :visible.sync="dialogVisible" width="40%" :modal="false">

        确定支付{{ sumPrice }}元

      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
     <el-button type="primary" @click="confOrder">确 定 购 买</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getShopCarList, updateCount, delShopcart } from '@/api/shopCar'
import { addOrder } from '@/api/order'
export default {
  data () {
    return {
      dialogVisible: false,
      checked: false,
      checkModel: [],
      totalPrice: 0,
      shopList: [],
      num: 1,
      testdata: [],
      bookList: []
    }
  },
  watch: {
    checkModel: function () {
      if (this.checkModel.length === this.testdata.length) {
        this.checked = true
      } else {
        this.checked = false
      }
    }
  },

  created () {
    this.getShopCart()
  },

  computed: {
    sumPrice () {
      var price = 0
      this.testdata.forEach((item) => {
        if (item.check) {
          price += item.price * item.num
        }
      })
      return price
    },
    sumNum () {
      var num = 0
      this.testdata.forEach((item) => {
        if (item.check) {
          num += item.num
        }
      })
      return num
    }
  },
  methods: {
    // 提交订单
    confOrder () {
      this.testdata.forEach(item => {
        if (item.check) {
          this.bookList.push(item.bookId)
        }
      })
      this.bookList.forEach((item) => {
        if (item.coverImg) {
          item.coverImg = item.coverImg.substring(this.userInfo.coverImg.lastIndexOf('/'))
        }
      })
      const data = {
        userId: JSON.parse(localStorage.getItem('userMsg')).id,
        bookIds: this.bookList
      }
      console.log(this.bookList)
      addOrder(data).then(res => {
        if (res.data.meta.status === 200) {
          this.$message({
            message: res.data.meta.msg,
            type: 'success'
          })
          this.dialogVisible = false
          this.getShopCart()
        } else {
          this.$message({
            message: res.data.meta.msg,
            type: 'warning'
          })
        }
      })
    },
    deleteOnePro: function (index) {
      console.log(this.testdata[index].id)
      const data = {
        id: this.testdata[index].id,
        type: 1
      }
      delShopcart(data).then(res => {
        if (res.data.meta.status === 200) {
          this.$message({
            message: res.data.meta.msg,
            type: 'success'
          })
        } else {
          this.$message({
            message: res.data.meta.msg,
            type: 'warning'
          })
        }
      })
      this.getAllBook()
    },

    deletePro: function (index) {
      // 清空购物车
      const data = {
        id: JSON.parse(localStorage.getItem('userMsg')).id,
        type: 0
      }

      delShopcart(data).then(res => {
        console.log(res.data)
        if (res.data.meta.status === 403) {
          this.$message({
            message: '传入数据不对！',
            type: 'warning'
          })
        } else if (res.data.meta.status === 500) {
          this.$message({
            message: '操作失败！',
            type: 'warning'
          })
        } else {
          this.$message({
            message: '清空成功',
            type: 'success'
          })
        }
      })
    },

    checkAll: function () {
      this.checked = !this.checked
      if (!this.checked) {
        this.checkModel = []
        this.totalPrice = 0
        this.testdata.forEach((item) => {
          item.check = this.checked
        })
      } else {
        this.testdata.forEach((item) => {
          if (this.checkModel.indexOf(item.bookId) === -1) {
            this.checkModel.push(item.bookId)
            if (typeof item.check === 'undefined') {
              this.$set(item, 'check', false)
              item.check = !item.check
            } else {
              item.check = !item.check
            }
          }
        })
      }
    },

    changeSelected: function (productId) {
      this.testdata.forEach((item, index) => {
        if (typeof item.check === 'undefined') {
          this.$set(item, 'check', true)
          if (item.bookId === productId) {
            item.check = !item.check
          }
        } else {
          if (item.bookId === productId) {
            item.check = !item.check
          }
        }
      })
    },

    // 添加商品数量
    add: function (id) {
      // 购物车+++
      // var productId = id
      const token = localStorage.getItem('userMsg')
      console.log(JSON.parse(token).id)
      this.testdata.forEach((item, index) => {
        if (item.bookId === id) {
          item.num++
          const data = {
            num: item.num,
            accId: JSON.parse(token).id,
            bookId: id
          }
          updateCount(data).then(res => {
            console.log(res)
          })
        }
      })
    },
    // 减少商品数量
    sub: function (id) {
      // 购物车---
      // var productId = id
      const token = localStorage.getItem('userMsg')
      this.testdata.forEach((item, index) => {
        if (item.bookId === id) {
          if (item.num > 1) {
            item.num--
          } else {
            item.num = 1
          }
          const data = {
            num: item.num,
            accId: JSON.parse(token).id,
            bookId: id
          }
          updateCount(data).then(res => {
            console.log(res)
          })
        }
      })
    },

    // 获取购物车
    getShopCart () {
      const userId = JSON.parse(localStorage.getItem('userMsg')).id
      // const token = localStorage.getItem('userToken')
      console.log(userId)
      getShopCarList(userId).then(res => {
        console.log(res)
        this.testdata = res.data.data
        this.testdata.forEach(item => {
          this.$set(item, 'check', false)
          if (item.coverImg) {
            item.coverImg = 'http://localhost:4096/img' + item.coverImg
          }
        })
      })
    },
    reback: function () {
      this.$router.go(-1)
    },
    pay: function () {
      this.dialogVisible = true
    },
    getGoodsInfo: function (bookId) {
      var id = 0
      this.shopList.forEach((item, index) => {
        if (item.bookId === bookId) {
          id = item.bookId
        }
      })
      this.$router.push({
        path: '/bookall',
        query: { bookId: id } // 传参数id到详情页
      })
    }
  }
}
</script>

<style scoped> .all {
  position: relative;
  width: 100%;
  background-color: #f0f0f0;
}

.page-shopping-cart {
  background-color: white;
  position: absolute;
}

.page-shopping-cart {
  width: 980px;
  font-size: 14px;
  border: 1px solid #e3e3e3;
  border-top: 2px solid #FF2832;
}

.page-shopping-cart h1 {
  float: right;
  margin-top: 10px;
}

.fl {
  float: left;
}
.fr {
  float: right;
}
blockquote,
body,
dd,
div,
dl,
dt,
fieldset,
form,
h2,
h3,
h4,
h5,
h6,
img,
input,
li,
ol,
p,
table,
td,
textarea,
th,
ul {
  margin: 0;
  padding: 0;
}
.clearfix {
  zoom: 1;
}
.clearfix:after {
  clear: both;
}
.clearfix:after {
  content: ".";
  display: block;
  overflow: hidden;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
}
a {
  text-decoration: none;
  color: #333;
}
img {
  vertical-align: middle;
}

.page-shopping-cart .cart-title {
  color: #FF2832;
  font-size: 16px;
  text-align: left;
  padding-left: 20px;
  line-height: 68px;
}
.page-shopping-cart .red-text {
  color: #e94826;
}
.page-shopping-cart .check-span {
  display: block;
  width: 24px;
  height: 20px;
  background: url("#") no-repeat 0 0;
}
.page-shopping-cart .check-span.check-true {
  background: url("#") no-repeat 0 -22px;
}
.page-shopping-cart .td-check {
  width: 70px;
}
.page-shopping-cart .td-name {
  width: 155px;
}
.page-shopping-cart .td-product {
  width: 145px;
}
.page-shopping-cart .td-num,
.page-shopping-cart .td-price,
.page-shopping-cart .td-total {
  width: 155px;
}
.page-shopping-cart .td-do {
  width: 100px;
}
.page-shopping-cart .cart-product-title {
  text-align: center;
  height: 38px;
  line-height: 38px;
  padding: 0 20px;
  background: #f7f7f7;
  border-top: 1px solid #e3e3e3;
  border-bottom: 1px solid #e3e3e3;
}
.page-shopping-cart .cart-product-title .td-product {
  text-align: center;
  font-size: 14px;
}
.page-shopping-cart .cart-product-title .td-check {
  text-align: left;
}
.page-shopping-cart .cart-product-title .td-check .check-span {
  margin: 9px 6px 0 0;
}
.page-shopping-cart .cart-product {
  padding: 0 20px;
  text-align: center;
}
.page-shopping-cart .cart-product table {
  width: 100%;
  text-align: center;
  font-size: 14px;
}
.page-shopping-cart .cart-product table td {
  padding: 20px 0;
}
.page-shopping-cart .cart-product table tr {
}
.page-shopping-cart .cart-product table tr:last-child {
  border-bottom: none;
}
.page-shopping-cart .cart-product table .product-num {
  border: 1px solid #e3e3e3;
  display: inline-block;
  text-align: center;
}
.page-shopping-cart .cart-product table .product-num .num-do {
  width: 24px;
  height: 28px;
  display: block;
  background: #f7f7f7;
}
.page-shopping-cart .cart-product table .product-num .num-reduce span {
  background: url("#") no-repeat -40px -22px;
  display: block;
  width: 6px;
  height: 2px;
  margin: 4px auto 0 auto;
}

.page-shopping-cart .cart-product table .product-num .num-add span {
  background: url("#") no-repeat -60px -22px;
  display: block;
  width: 8px;
  height: 8px;
  margin: 4px auto 0 auto;
}
.page-shopping-cart .cart-product table .product-num .num-input {
  width: 42px;
  height: 28px;
  line-height: 28px;
  border: none;
  text-align: center;
}
.page-shopping-cart .cart-product table .td-product {
  text-align: left;
  font-size: 12px;
  line-height: 20px;
}
.page-shopping-cart .cart-product table .td-product img {
  border: 1px solid #e3e3e3;
  margin-right: 10px;
}
.page-shopping-cart .cart-product table .td-do {
  font-size: 12px;
}
.page-shopping-cart .cart-product-info {
  height: 50px;
  width: 980px;
  line-height: 50px;
  background: #f7f7f7;
}
.page-shopping-cart .cart-product-info .delect-product {
  color: #666;
  float: left;
}
.page-shopping-cart .cart-product-info .delect-product span {
  display: inline-block;
  vertical-align: top;
  margin: 18px 8px 0 0;
  width: 13px;
  height: 15px;
  background: url("#") no-repeat -60px 0;
}
.page-shopping-cart .cart-product-info .product-total {
  font-size: 14px;
  color: #e94826;
}
.page-shopping-cart .cart-product-info .product-total span {
  font-size: 20px;
}
.page-shopping-cart .cart-product-info .check-num {
  color: #333;
}
.page-shopping-cart .cart-product-info .check-num span {
  color: #e94826;
}
.page-shopping-cart .cart-product-info .keep-shopping {
  color: #666;
  float: left;
}
.page-shopping-cart .cart-product-info .keep-shopping span {
  display: inline-block;
  vertical-align: top;
  margin: 18px 8px 0 0;
  width: 15px;
  height: 15px;
  background: url("#") no-repeat -40px 0;
}
.page-shopping-cart .cart-product-info .btn-buy {
  height: 50px;
  color: #fff;
  font-size: 20px;
  display: block;
  width: 110px;
  background: #ff7700;
  text-align: center;
  margin-left: 30px;
}

.choose-worker-box {
  width: 620px;
  background: #fff;
}
.choose-worker-box .box-title {
  height: 40px;
  line-height: 40px;
  background: #f7f7f7;
  text-align: center;
  position: relative;
  font-size: 14px;
}
.choose-worker-box .box-title a {
  display: block;
  position: absolute;
  top: 15px;
  right: 16px;
  width: 10px;
  height: 10px;
  background: url("#") no-repeat -80px 0;
}
.choose-worker-box .box-title a:hover {
  background: url("#") no-repeat -80px -22px;
}
.choose-worker-box .worker-list {
  padding-top: 30px;
  height: 134px;
  overflow-y: auto;
}
.choose-worker-box .worker-list li {
  float: left;
  width: 25%;
  text-align: center;
  margin-bottom: 30px;
}
.choose-worker-box .worker-list li p {
  margin-top: 8px;
}
.choose-worker-box .worker-list li.cur a {
  color: #f70;
}
.choose-worker-box .worker-list li.cur a img {
  border: 1px solid #f70;
}
.choose-worker-box .worker-list li a:hover {
  color: #f70;
}
.choose-worker-box .worker-list li a:hover img {
  border: 1px solid #f70;
}
.choose-worker-box .worker-list li img {
  border: 1px solid #fff;
  border-radius: 100%;
}
</style>
